<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程模型</title>

    <script src="libs/vue/vue.min.js"></script>
    <link href="libs/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="libs/element-ui/lib/index.js"></script>
    <script src="libs/func.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true" v-model="searchItem" @submit.native.prevent class="demo-form-inline">

            <el-form-item label="名称">
                <el-input v-model="searchItem.name" @keyup.enter.native="queryTableList" clearable size="small" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="queryTableList" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editInfo" icon="el-icon-plus" size="small">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="uploadDialogVisible = true" size="small">导入bpmn</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableList" v-loading="tableLoading" border style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id">
            </el-table-column>
            <el-table-column
                    prop="key"
                    label="业务表">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="模型名">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="maxVersion"
                    label="发布版本">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="lastUpdateTime"
                    label="修改时间">
            </el-table-column>


            <el-table-column width="300" fixed="right">
                <template slot="header" slot-scope="scope">
                    操作
                </template>

                <template slot-scope="scope">
                    <el-button v-if="scope.row.maxVersion == undefined" type="text" size="mini" @click="editInfo(scope.row)">编辑</el-button>
                    <el-button type="text" size="mini" @click="modeler(scope.row)">编辑流程</el-button>
                    <el-button type="text" size="mini" @click="deploy(scope.row)">发布</el-button>
                    <el-button type="text" size="mini" @click="exportXml(scope.row)">导出XML</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="编辑流程模型" :visible.sync="editDialogVisible">
            <el-form :model="editForm">
                <el-form-item label="业务表" :label-width="formLabelWidth">
                    <el-input v-model="editForm.key" placeholder="例如：pms_activity_item"></el-input>
                </el-form-item>
                <el-form-item label="模型名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="editForm.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="上传.bpmn或者.bpmn20.xml文件" :visible.sync="uploadDialogVisible">
            <el-row >
                <el-upload ref="uploadBpmn" drag
                      :before-upload="handleBeforeUpload"
                      :on-success="handleUploadSuccess"
                      :on-error="handleUploadError"
                      :accept="['.bpmn','.bpmn20.xml']"
                       action="model/importProcessModel">
                   <i class="el-icon-upload"></i>
                   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                   <div class="el-upload__tip" slot="tip"></div>
                </el-upload>
            </el-row>

        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                formLabelWidth: '120px',

                searchItem: {
                    name: ""
                },
                current: 1,
                totalSize: 0, //总条数
                pageNum: 1, //开始条数
                limit: 50, //每页记录数
                tableLoading: false,
                tableList: [],

                editForm: {
                    key: "",
                    name: "",
                    description: "",
                    revision: 1
                },
                editDialogVisible: false,

                uploadDialogVisible: false,
                uploadItem: {}
            }
        },
        created(){
            this.queryTableList();
        },
        methods: {
            queryTableList(){
                this.pageNum = 1;
                this.tableList = [];
                this.updateTableList();
            },
            changeCurrent(current) {
                this.pageNum = current;
                this.tableList = [];
                this.updateTableList();
            },
            updateTableList(){
                this.tableLoading = true
                const reqParams = JSON.parse(JSON.stringify(this.searchItem));

                api.postJson(ctx + 'model/page?current=' + this.pageNum + '&size=' + this.limit,
                    reqParams, (res) => {
                        this.tableLoading = false
                        if (res.code == "200") {
                            this.totalSize = res.data.total;
                            this.tableList = res.data.records;
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                                duration: 5000,
                                showClose: true
                            });
                        }
                    });
            },

            editInfo(item){
               if(item){
                   this.editForm = JSON.parse(JSON.stringify(item));
               } else {
                   this.editForm = {};
               }
               this.editDialogVisible = true;
            },

            saveOrUpdate(){
                let reqPam = JSON.parse(JSON.stringify(this.editForm));
                api.postJson(ctx + "model/saveOrUpdate", reqPam, (res) => {
                    if(res.code == "200"){
                        this.$message({
                            type: "success",
                            message: "成功",
                            showClose: true
                        });
                        this.updateTableList();
                        this.editDialogVisible = false;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                            duration: 5000,
                            showClose: true
                        });
                    }
                })
            },

            importModel(){
                this.uploadItem = item;
                this.uploadDialogVisible = true;
            },
            handleBeforeUpload(file){
                return new Promise((resolve, reject) => {
                    this.$nextTick(() => {
                        this.$refs.uploadBpmn.action = "model/importProcessModel";

                        resolve()
                    })
                })
            },
            handleUploadSuccess(response, file, fileList){
                if(response.code == "200"){
                    this.uploadDialogVisible = false;
                    this.$message({
                        type: "success",
                        message: "成功，即将跳转到流程编辑页",
                        showClose: true
                    });
                    setTimeout(()=>{
                        window.location.href = "modeler.html?modelId=" + response.data.id;
                    }, 1000);
                } else {
                    this.$message({
                        type: "error",
                        message: response.msg,
                        duration: 5000,
                        showClose: true
                    });
                }
            },
            handleUploadError(err, file, fileList){
                this.$message({
                    type: "error",
                    message: err,
                    duration: 5000,
                    showClose: true
                });
            },

            modeler(item){
                window.location.href = "modeler.html?modelId=" + item.id;
            },

            deploy(item) {
                this.$confirm('确认发布流程吗？', '请确认？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '发布中。。。',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    api.get(ctx + "model/deploy/" + item.id, {}, (res) => {
                        if(res.code == "200"){
                            loading.close();
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                            this.queryTableList();
                        } else {
                            loading.close();
                            this.$message({
                                type: "error",
                                message: res.msg,
                                duration: 5000,
                                showClose: true
                            });
                        }
                    })
                }).catch((e) => {
                    console.log(e)
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                })
            },

            exportXml(item){
                window.location.href = ctx + "model/exportXml/" + item.id;
            }
        }
    })
</script>
</html>